import React from 'react'

class FlipTimer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      second: [
        [5, 4, 3, 2, 1, 0],
        [9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
      ],
      count: props.count,
      active: [6, 0],
    }
    this.interval = null
  }

  clearInterval() {
    this.interval && clearInterval(this.interval)
  }

  startInterval() {
    const {onFlipTimeout} = this.props
    this.clearInterval()
    this.interval = setInterval(() => {
      let cur_count = this.state.count - 1
      if (cur_count > 0) {
        this.setState({
          count: this.state.count - 1
        })
      } else {
        this.clearInterval()
        onFlipTimeout && typeof onFlipTimeout === 'function' && onFlipTimeout()
      }
    }, 1000)
  }

  componentDidMount() {
    this.startInterval()
  }
  componentWillUnmount() {
    this.clearInterval()
  }
  getCurCount() {
    const {count} = this.state
    let cur_count = count >= 10 ? (count + '') : ('0' + count)
    return {
      1: +cur_count[0],
      2: +cur_count[1]
    }
  }
  renderColumn(num) {
    let count_map = {
      1: [6, 5, 4, 3, 2, 1, 0],
      2: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
    }
    const cur_count = this.getCurCount()
    let values = count_map[num]
    let cur_num_count = cur_count[num]
    let pre_num_count = cur_count[num] + 1
    if (pre_num_count > Math.max(count_map[num])) {
      pre_num_count = Math.min(count_map[num])
    }
    return values.map((_, i) => {
      let active = cur_num_count === _
      let previous = pre_num_count === _
      return (
        <div key={`${num}_${i}`} className={`digit ${active ? 'active' : ''} ${previous ? 'previous' : ''}`}>
          <div className="digit-top"><span className="digit-wrap">{_}</span></div>
          <div className="shadow-top"></div>
          <div className="digit-bottom"><span className="digit-wrap">{_}</span></div>
          <div className="shadow-bottom"></div>
        </div>
      )
    })
  }

  render() {
    return (
      <div className="flipTimer">
        <div className="minutes">
          <div className="digit-set">
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">5</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">5</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">4</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">4</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">3</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">3</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">2</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">2</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">1</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">1</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">0</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">0</span></div>
              <div className="shadow-bottom"></div>
            </div>
          </div>
          <div className="digit-set">
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">9</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">9</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">8</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">8</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">7</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">7</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">6</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">6</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">5</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">5</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">4</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">4</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">3</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">3</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">2</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">2</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">1</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">1</span></div>
              <div className="shadow-bottom"></div>
            </div>
            <div className="digit">
              <div className="digit-top"><span className="digit-wrap">0</span></div>
              <div className="shadow-top"></div>
              <div className="digit-bottom"><span className="digit-wrap">0</span></div>
              <div className="shadow-bottom"></div>
            </div>
          </div>
        </div>
        <div className="seperator"></div>
        <div className="seconds">
          <div className="digit-set">
            {this.renderColumn(1)}
          </div>
          <div className="digit-set">
            {this.renderColumn(2)}
          </div>
        </div>
      </div>
    )
  }
}

export default FlipTimer
